<template>
	<scroll-view
	scroll-y
	enable-flex 
	class="video_main"
	@scrolltolower="handleScrolltolower"
	>
	<view class="video_item"
	v-for="item in videowp"
	:key="item.id"
	@click="handleGovideo(item)"
	>
		<image mode="widthFix" :src="item.img"></image>
	</view>	
	</scroll-view>
</template>

<script>
export default{
	props:{
		urlobj:Object
	},
	data(){
		return{
			videowp:[],
			hasMore:true
		}
	},
	watch:{
		urlobj(){
			//页面跳转时数据清空
			this.videowp=[];
			//重新发送请求
			this.getList();
		}
	},
	mounted() {
		this.getList();
	},
	methods: {
		getList() {
			this.request({
				url: this.urlobj.url,
				data: this.urlobj.params
			}).then(result=>{
				if (result.res.videowp.length === 0){
					this.hasMore=false;
					uni.showToast({
						title:"没有数据了",
						icon:"none"
					})
					return;
				}
				this.videowp = [...this.videowp,...result.res.videowp];
			});
		},
		//分页事件
		handleScrolltolower() {
		  if(this.hasMore) {
		    this.urlobj.params.skip += this.urlobj.params.limit;
		    this.getList();
		  } else {
		    uni.showToast({
		      title: "没有更多数据了",
		      icon: "none"
		    });
		  }
		},
		//图片点击事件
		handleGovideo(item){
			// 1 将数据存到全局共享中
			getApp().globalData.video=item;
			// 2 页面跳转
			uni.navigateTo({
				url:"/pages/videoplay/index"
			})
		}
	}

}
</script>

<style lang="scss" scoped>
	.video_main{
		display: flex;
		flex-wrap: wrap;
		
		height: calc(100vh - 36px);
		.video_item{
			display: inline-block; 
			width: 33.33%;
			border: 2px solid #fff;
		}
	}
</style>
